<script setup lang="ts">
import { ref } from 'vue'

defineProps({
  inputListLabels: {
    type: Array<string>,
    default: []
  },
  inputListTypes: {
    type: Array<string>,
    default: []
  },
  inputListRef: {
    type: Object,
    default: ref([''])
  },
  inputListOptions: {
    type: Object,
    default: new Map()
  }
})
</script>

<template>
  <div class="input-area">
    <div class="input-group" v-for="(inputObj, index) in inputListLabels">
      <label>{{ inputObj }}</label>
      <el-select v-if="inputListTypes[index]==='select'" v-model="inputListRef[index]" style="width: 100%;">
        <el-option 
          v-for="item in inputListOptions.get(2)['select_options']"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div v-else-if="inputListTypes[index]==='either'" style="width: 100%; display: inline-block;">
        <el-switch  v-model="inputListRef[index]"/>
      </div>
      <el-input v-else :placeholder="inputObj" :type="inputListTypes[index]" v-model="inputListRef[index]"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.input-group {
  margin-block: 2px;
}
</style>